<div class="row repository-container">

    <div class="col-lg-8 header-left">
        <div class="namespace-img">
            <div class="img-wrapper">
                <a appLogEvent="Author Profile" [routerLink]="['/', headerData.namespace]"
                    tooltip="View the author's profile." >
                    <img class="namespace-avatar" [src]="headerData.avatarUrl"></a>
            </div>
            <div class="namespace-name" tooltip="{{ headerData.namespace }}">
                <a appLogEvent="Author Profile" [routerLink]="['/', headerData.namespace]">
                    {{ headerData.namespace }}</a>
            </div>
        </div>

        <div class="valign-center-box">
            <div>
                <div class="description-box">
                    <div class="repo-name text-overflow-pf">
                        <span class="fa" [ngClass]="headerData.iconClass" tooltip="{{ headerData.tooltip }}"></span>
                        {{ headerData.name }}
                        <div *ngIf="headerData.deprecated" tooltip="This item has been deprecated. Use at your own risk." class="label label-danger deprecation-notice">
                            Deprecated
                        </div>
                    </div>
                    <div class="repo-description">
                        {{ headerData.description }}
                        <div *ngIf="headerData.description.length > 250" class="fade-out"></div>
                    </div>

                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-4 repository-details valign-center-box">

        <div class="inner">
            <div class="scores">
                <app-score
                    class="repo-count"
                    [repo]="headerData.score"
                ></app-score>
                <div class="repo-count">
                    <i class="fa fa-download fa"></i>
                    <span class="count">{{ headerData.downloadCount }}</span>
                    <span class="count-label">Downloads</span>
                </div>
            </div>

            <div class="control-buttons">
                <div class="header-button">
                    <div
                        *ngIf="preferences"
                        [tooltip]='"Get notified when this "+headerData.formatType+" gets updated."'
                        class="btn btn-default"
                        (click)="followCollection()"
                    >
                        <span class="{{followerClass}}"></span> {{ isFollower ? 'Unfollow ' + headerData.formatType :'Follow ' + headerData.formatType}}
                    </div>
                    <a
                        *ngIf="!preferences"
                        [tooltip]='"Get notified when this "+headerData.formatType+" gets updated."'
                        class="btn btn-default"
                        [routerLink]='["/", "login"]'
                        [queryParams]='{next: router.url}'
                    >
                        <span class="fa fa-user-plus"></span> Login to Follow
                    </a>
                </div>

                <div class="header-button" *ngIf="headerData.issueTrackerUrl" >
                    <a [href]="headerData.issueTrackerUrl"
                        target="_blank"
                        class="btn btn-default"><i class="fa fa-bug"></i> Issue Tracker</a>

                </div>

                <div class="header-button" *ngIf="headerData.scmUrl">
                    <a [href]="headerData.scmUrl" target="_blank"
                        tooltip="Look at the source code." class="btn btn-default">
                            <i [ngClass]="headerData.scmIconClass"></i> {{ headerData.scmName }} Repo</a>
                </div>

                <div class="header-button" *ngIf="headerData.website">
                    <a [href]="headerData.website" target="_blank"
                        class="btn btn-default">
                        <i class="fa fa-external-link"></i> Website</a>
                </div>

                <div class="header-button" *ngIf="headerData.documentationLink">
                    <a [href]="headerData.documentationLink" target="_blank"
                        class="btn btn-default">
                            <i class="fa fa-external-link"></i> Docs Site</a>
                </div>

                <div class="header-button">
                    <div class="travis" *ngIf="headerData.travis_build_url">
                        <a href="{{ headerData.travis_build_url }}" container="body" target="_blank" tooltip="View Travis build output. Opens in new tab or window.">
                            <img src="{{ headerData.travis_status_url }}"
                                class="travis-status-img" title="Travis Build Status" />
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
